<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="statics/layui/css/layui.css" />
		<script type="text/javascript" src="statics/js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="statics/layui/layui.js"></script>

		<style type="text/css">
			.layui-input {
				margin-top: 10px;
				height: 30px;
			}
			
			.layui-form-label {
				margin-top: 5px;
			}
			
			.layui-input-inline {
				float: left;
			}
			
			.zhi {
				width: 0px;
				margin-right: 15px;
			}
			
			.bottom2 {
				position: relative;
				left: 200px;
			}
			
			.mx .dc .sh {
				cursor: pointer;
			}
			
			.bottom1 {
				position: relative;
				left: 200px;
			}
		</style>

	</head>

	<body>
		<form class="layui-form" action="getEquipmentSheetByState" method="post" id="form1">
			<div class="layui-inline">
				<label class="layui-form-label">装潢单号</label>
				<div class="layui-input-inline" style="width: 180px;">
					<input type="text" name="equipmentSheetNo" autocomplete="off" class="layui-input" value="${map.equipmentSheetNo!}">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户名称</label>
				<div class="layui-input-inline" style="width: 180px;">
					<input type="text" name="customer.customerName" autocomplete="off" class="layui-input" value="${map.customerName!}">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">VIN</label>
				<div class="layui-input-inline" style="width: 180px;">
					<input type="text" name="car.vin" autocomplete="off" class="layui-input" value="${map.vin!}">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">车牌号</label>
				<div class="layui-input-inline" style="width: 180px;">
					<input type="text" name="car.carCard" autocomplete="off" class="layui-input" value="${map.carCard!}">
				</div>
			</div>
			<br />
			<div class="layui-inline">
				<label class="layui-form-label">装潢业务类型</label>
				<div class="layui-input-inline">
					<select name="upholsteryType.upholsteryType" lay-filter="aihao">
						<option value="-1">请选择</option>
						<option value="${map.upholsteryType!}" style="display: none;"></option>
						<#list listType as list>
							<#if list.upholsteryType! == map.upholsteryType!>
								<option value="${list.upholsteryType!}" selected="selected">${list.upholsteryType!}</option>

								<#else>
									<option value="${list.upholsteryType!}">${list.upholsteryType!}</option>

							</#if>

						</#list>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">开单日期</label>
				<div class="layui-input-inline">
					<input type="text" id="start_time" name="start_time" autocomplete="off" placeholder="请输入开始时间" class="layui-input" value="${map.start_time!}">
				</div>
				<label class="layui-form-label zhi">至</label>
				<div class="layui-input-inline">
					<input type="text" id="end_time" name="end_time" autocomplete="off" placeholder="请输入结束时间" class="layui-input" value="${map.end_time!}">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-inline bottom2">
					<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
					<button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
				</div>
			</div>

			<input type="text" name="pageNo" value="" id="pageNo" style="display: none;" />
		</form>

		<table class="layui-table" lay-skin="line">
			<thead>
				<tr>
					<th>序号</th>
					<th>操作</th>
					<th>装潢单号</th>
					<th>装潢业务类型</th>
					<th>客户编号</th>
					<th>客户名称</th>
					<th>联系电话</th>
					<th>vin</th>
					<th>车牌号</th>
					<th>合计金额</th>
					<th>赠送金额</th>
					<th>应收金额</th>
					<th>开单日期</th>
					<th>单据状态</th>
				</tr>
			</thead>
			<tbody>
				<#list pageInfo.list as es>
					<tr>
						<td>${es_index+1}</td>
						<td>
							<img class="mx" alt="按揭单明细" src="statics/icon/ajdmx.png" title="装潢单明细" onclick="zhdmx(${es.equipmentSheet.equipmentSheetNo!})" />
							<img class="dc" src="statics/icon/ajdmx.png" alt="审核记录" title="审核记录" onclick="shjl(${es.equipmentSheet.equipmentSheetNo!})" />
							<img class="sh" src="statics/icon/027-sh.png" alt="审核" title="审核" onclick="openModak(${es.equipmentSheet.equipmentSheetNo!})" />
						</td>
						<td>${es.equipmentSheet.equipmentSheetNo!}</td>
						<td>${es.upholsteryType.upholsteryType!}</td>
						<td>${es.customer.customerId!}</td>
						<td>${es.customer.customerName!}</td>
						<td>${es.customer.customerTel!}</td>
						<td>${es.car.vin!}</td>
						<td>${es.car.carCard!}</td>
						<td>${es.equipmentSheet.totalPrice!}</td>
						<td>${es.equipmentSheet.givenMoney!}</td>
						<td>${es.equipmentSheet.receivables!}</td>
						<td>${es.equipmentSheet.openingTime!}</td>
						<td class="state1">${es.equipmentSheet.equipmentSheetState!}</td>
					</tr>
				</#list>
				<tr>
					<td colspan="10" align="center">
						<a href="javascript:do_page(1)">首页</a>&nbsp;
						<a href="javascript:do_page(${pageInfo.pageNo-1})">上一页</a>&nbsp;
						<a href="javascript:do_page(${pageInfo.pageNo+1})">下一页</a>&nbsp;
						<a href="javascript:do_page(${pageInfo.pageTotal})">末页</a>&nbsp;&nbsp; ${pageInfo.pageNo} /${pageInfo.pageTotal}页 &nbsp;
						<input name="pageNumber" type="text" id="pageNumber" size="5" />
						<input type="button" name="btnQuery2" id="btnQuery2" value="GO" /> </td>
				</tr>
			</tbody>
		</table>
	</body>

	<form class="layui-form zhdsh" style="display: none;">
		<div style="height: 40px;background-color: rgb(248,248,248);">
			<label class="layui-form-label">审核结果</label>
		</div>
		<div class="layui-form-item">
    <div class="layui-input-block">
      <input type="radio" name="equipmentSheetState" value="审核通过" title="审核通过" checked>
      <input type="radio" name="equipmentSheetState" value="审核驳回" title="审核驳回" >
    </div>
  </div>
		<div style="height: 40px;background-color: rgb(248,248,248);">
			<label class="layui-form-label">意见批注</label>
		</div>
		<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea spyj"></textarea>
		<div class="layui-inline" id="jdr">
			<label class="layui-form-label">接单人</label>
				<div class="layui-input-inline">
					<select name="upholsteryType.upholsteryType" lay-filter="aihao">
						<option value="-1">请选择</option>
						<#list personList as list>
							<option value="${list_index+1!}">${list.personName!}</option>
						</#list>
					</select>
				</div>
			</div>
			
	</form>

	<div class="layui-form" style="display: none;" id="shjl">
		<table class="layui-table" lay-skin="line">
			<thead>
				<tr>
					<th>序号</th>
					<th>装潢单号</th>
					<th>提交时间</th>
					<th>审核时间</th>
					<th>审核结果</th>
					<th>审核人</th>
					<th>审核类型</th>
					<th>处理意见</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
	</div>
	<!--装潢单明细-->
	<form id="zhdmx" class="layui-form zhdmx" lay-filter="formTest" style="display: none;">
		<div style="height: 40px;background-color: rgb(248,248,248);">
			<label class="layui-form-label">装潢信息</label>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">装潢单号</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="equipmentSheetNo" autocomplete="off" class="layui-input demo1" disabled="disabled" id="equipmentSheetNo1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">装潢业务类型</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="upholsteryType" autocomplete="off" class="layui-input demo2" disabled="disabled" id="upholsteryType1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">单据状态</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="equipmentSheetState" autocomplete="off" class="layui-input demo3" id="equipmentSheetState1" disabled="disabled">
			</div>
		</div>
		<br />
		<div class="layui-inline">
			<label class="layui-form-label">开单人</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="employeeName1" autocomplete="off" class="layui-input demo4" disabled="disabled" id="employeeName1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">接单人</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="mortgageSheetState" autocomplete="off" class="layui-input demo5" disabled="disabled">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="comment" autocomplete="off" class="layui-input demo5" disabled="disabled" id="comment1">
			</div>
		</div>
		<div style="height: 40px;background-color: rgb(248,248,248);">
			<label class="layui-form-label" style="width: 120px;">客户车辆信息</label>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">客户编号</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="customerId" autocomplete="off" class="layui-input demo7" disabled="disabled" id="customerId1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">客户名称</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="customerName" autocomplete="off" class="layui-input demo7" disabled="disabled" id="customerName1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="customerTel" autocomplete="off" class="layui-input demo8" disabled="disabled" id="customerTel1">
			</div>
		</div>
		<br />
		<div class="layui-inline">
			<label class="layui-form-label">车系</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="series" autocomplete="off" class="layui-input demo9" disabled="disabled" id="series1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">车型</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="model" autocomplete="off" class="layui-input demo10" disabled="disabled" id="model1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">颜色	</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="color" autocomplete="off" class="layui-input demo11" disabled="disabled" id="color1">
			</div>
		</div>
		<br />
		<div class="layui-inline">
			<label class="layui-form-label">vin</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="vin" autocomplete="off" class="layui-input demo12" disabled="disabled" id="vin1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">车牌号</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="carCard" autocomplete="off" class="layui-input demo13" disabled="disabled" id="carCard1">
			</div>
		</div>
		<div style="height: 40px;background-color: rgb(248,248,248);">
			<label class="layui-form-label" style="width: 120px;">车辆施工信息</label>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">预计开工日期</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="startTime" autocomplete="off" class="layui-input demo14" disabled="disabled" id="startTime1">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">预计完工日期</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="endingTime" autocomplete="off" class="layui-input demo15" disabled="disabled" id="endingTime1">
			</div>
		</div>
		<div style="height: 40px;background-color: rgb(248,248,248);">
			<label class="layui-form-label">装潢用品</label>
		</div>
		<table class="layui-table" lay-skin="line" id="decorationTableList">
			<thead>
				<tr>
					<th>序号</th>
					<th>用品名称</th>
					<th>数量</th>
					<th>计量单位</th>
					<th>销售指导价</th>
					<th>折扣率</th>
					<th>实际价格</th>
					<th>合计</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
		<div class="layui-inline">
			<label class="layui-form-label">合计金额</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="totalPrice" autocomplete="off" class="layui-input demo15" disabled="disabled" id="totalPrice">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">应收金额</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="receivables" autocomplete="off" class="layui-input demo15" disabled="disabled" id="receivables">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">赠送金额</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input type="text" name="givenMoney" autocomplete="off" class="layui-input demo15" disabled="disabled" id="givenMoney">
			</div>
		</div>
	</form>

	<script type="text/javascript">
		layui.use('form', function() {
			var form = layui.form;
			//监听提交
			form.on('radio(filter)', function(data){
  			if(data.value != "审核通过"){
  				$("#jdr").hide();
  			}else{
  				$("#jdr").show();
  			}
});
		});
		//日期
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			var endDate = laydate.render({
				elem: '#end_time', //选择器结束时间
				type: 'date',
				min: "1970-1-1", //设置min默认最小值
				done: function(value, date) {
					startDate.config.max = {
						year: date.year,
						month: date.month - 1, //关键
						date: date.date,
						hours: 0,
						minutes: 0,
						seconds: 0
					}
				}
			});
			//日期范围
			var startDate = laydate.render({
				elem: '#start_time',
				type: 'date',
				max: "2099-12-31", //设置一个默认最大值
				done: function(value, date) {
					endDate.config.min = {
						year: date.year,
						month: date.month - 1, //关键
						date: date.date,
						hours: 0,
						minutes: 0,
						seconds: 0
					};
				}
			});
		});

		//改变审核的按钮
		$(function() {
			$(".state1").each(function(index) {
				if($(this).html() != "正在审核") {
					$(this).parent().find(".sh").attr("src", "statics/icon/027-sh2.png");
					$(this).parent().find(".sh").attr('onclick', '').unbind('click');
				}
			})
			
			//重置
			$("#reset").click(function(){
				window.location.href="getEquipmentSheetByState";
			});
		})

		//分页
		function do_page(pageNo) {
			document.getElementById("pageNo").value = pageNo;
			document.getElementById("form1").submit();
		}

		//打开模态框
		function openModak(equipmentSheetNo) {
			
			layui.use(['layer'], function() {

				var layer = layui.layer,
					$ = layui.$;
				layer.open({
					type: 1, //类型
					area: ['1100px'], //定义宽和高
					title: '审批', //题目
					shadeClose: false, //点击遮罩层关闭
					content: $('.zhdsh'), //打开的内容
					btn: ['审核', '取消'], //可以无限个按钮
					yes: function(index, layero) {
						var str1 = $(".spyj").val();
						if(str1 == "") {
							layer.alert('请填写审核意见', {
								icon: 5,
								title: "提示"
							});
						} else {
							var result = $(".zhdsh input[name='equipmentSheetState']:checked").val()
							//获取接单人
							var personMessage = $("#person option:selected").val();
							layer.confirm('是否确认审核？', {
								btn: ['确定', '取消'] //按钮
							}, function() {
								$.ajax({
									type: "get",
									url: "updEquipmentSheetState",
									data: {
										"result": result,
										"equipmentSheetNo": equipmentSheetNo,
										"auditOpinion": str1,
										"personMessage": personMessage
									},
									success: function(data) {
										if(data == true) {
											window.location.href = "getEquipmentSheetByState";
										}
									},
									async: true
								});
							});
						}
					},
					cancel: function(index, layero) {
						if(confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
							layer.close(index)
						}
						return false;
					}
				});
			})
			
			
		}

		//审核记录
		function shjl(id) {

			$.ajax({
				type: "get",
				url: "selAuditLoggingById?id=" + id,
				success: function(date) {
					$("#shjl table tbody tr").remove();

					$(date).each(function(index, logging) {
						var tr = "<tr><td>" + index + 1 + "</td><td>" + logging.equipmentSheetNo + "</td><td>" + renderTime(logging.openingTime+"") + "</td>" +
							"<td>" + renderTime(logging.auditTime+"") + "</td><td>" + logging.auditResult + "</td><td>" + logging.auditName + "</td>" +
							"<td>" + logging.auditType + "</td><td>" + logging.auditOpinion + "</td></tr>";
						$("#shjl table tbody").append(tr);
					})
				},
				async: true
			});

			layui.use(['layer'], function() {
				var layer = layui.layer,
					$ = layui.$;
				layer.open({
					type: 1, //类型
					area: ['1100px', '500px'], //定义宽和高
					title: '审核记录', //题目
					shadeClose: false, //点击遮罩层关闭
					content: $('#shjl'), //打开的内容
					cancel: function(index, layero) {
						if(confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
							layer.close(index)
						}
						return false;
					}
				});
			})
		}

		//时间戳转换
		function renderTime(date) {
			var da = new Date(parseInt(date.replace("/Date(", "").replace(")/", "").split("+")[0]));
			return da.getFullYear() + "-" + (da.getMonth() + 1) + "-" + da.getDate();
		}

		//装潢单明细
		function zhdmx(equipmentSheetNo) {


			$.getJSON("getEquipmentDetail", {
					"equipmentSheetNo": equipmentSheetNo
				},
				function(date) {
					$("#equipmentSheetNo1").val(date.equipmentSheetNo);
					$("#upholsteryType1").val(date.upholsteryType);
					$("#equipmentSheetState1").val(date.equipmentSheetState);
					$("#employeeName1").val(date.employeeName);
					var personList = date.installationPersonList;
					var s = "<option  value='-1' selected>-请选择-</option>";
					for(i = 0; i < personList.length; i++) {
						if(date.personNo == personList[i].personNo) {
							s += "<option value='" + personList[i].personNo + "' selected>" + personList[i].personName + "</option>"
						} else {
							s += "<option value='" + personList[i].personNo + "'>" + personList[i].personName + "</option>";
						}
					}
					$("#personNo1").append(s);
					$("#comment1").val(date.comment);
					$("#customerId1").val(date.customerId);
					$("#customerName1").val(date.customerName);
					$("#customerTel1").val(date.customerTel);
					$("#series1").val(date.series);
					$("#model1").val(date.model);
					$("#color1").val(date.color);
					$("#vin1").val(date.vin);
					$("#carCard1").val(date.carCard);
					$("#startTime1").val(renderTime(date.startTime+""));
					$("#endingTime1").val(renderTime(date.endingTime+""));
					temporary = date.temporaryCarPartsList
					var myStr = "";
					for(i = 0; i < temporary.length; i++) {
						myStr += "<tr><td>" + (i + 1) + "</td><td>" + temporary[i].carPartsName + "</td>" +
							"<td>" + temporary[i].carPartsCount + "</td><td>" + temporary[i].metering + "</td>" +
							"<td>" + temporary[i].guidedPrice + "</td><td>" + temporary[i].discountRate + "</td>" +
							"<td>" + temporary[i].actualPrice + "</td><td>" + temporary[i].totalPrice + "</td></tr>";
					}
                    $("#decorationTableList tr:not(:first)").remove();
					$("#decorationTableList tbody").append(myStr);
					$("#totalPrice").val(date.totalPrice);
					$("#receivables").val(date.receivables);
					$("#givenMoney").val(date.givenMoney);
				});

			layui.use(['layer'], function() {
				var layer = layui.layer,
					$ = layui.$;
				layer.open({
					type: 1, //类型
					area: ['1100px'], //定义宽和高
					title: '装潢单明细', //题目
					shadeClose: false, //点击遮罩层关闭
					content: $('#zhdmx'), //打开的内容
					cancel: function(index, layero) {
						if(confirm('确定要关闭么')) { //只有当点击confirm框的确定时，该层才会关闭
							layer.close(index)
						}
						return false;
					}
				});
			})
		}
	</script>

</html>